<template>
  <div>
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="菜单名称">
        <el-cascader
          :options="options"
          :props="{
            value: 'menuId',
            label: 'menuName',
            children: 'child',
            checkStrictly: true,
          }"
          clearable
          style="width: 100%"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="菜单名称">
        <el-input v-model="ruleForm.menuName"></el-input>
      </el-form-item>
      <el-form-item label="菜单路径">
        <el-input v-model="ruleForm.menuUrl"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "@/unit/request";
export default {
  props: {
    menuId: Number,
  },
  data() {
    return {
      ruleForm: {
        menuName: "",
        menuUrl: "",
        pId: "",
      },
      options: [],
    };
  },

  methods: {
    MenuList() {
      axios.get("/Menu/Query").then((res) => {
        this.options = res.data.data;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post("/Menu/Insert", this.ruleForm).then((res) => {
            if (res.data.code == 1) {
              this.$message.success(res.data.message);

              this.$emit("OnSave");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },

  created() {
    this.MenuList();
    this.ruleForm.pId = this.menuId;
  },

  watch: {
    MenuId(newMenuId) {
      this.ruleForm.pId = newMenuId;
    },
  },
};
</script>
<style>
</style>